<template>
  <div class="themeColor">
    <div :style="{color:variables.color_333,fontSize:variables.size_16}">颜色</div>
    <div class="theme">
      主题
    </div>
    <el-button @click="change">
      改变
    </el-button>
  </div>
</template>

<script>

import variables from "@/styles/variables.scss.js"
export default {
  name: "themeColor",
  data() {
    return {
      color: "red",
      variables
    };
  },
  methods: {
    change() {
      if (this.color == "blue") {
        this.color = "red";
        document
          .getElementsByTagName("body")[0]
          .style.setProperty("--theme-color", this.color);
      } else {
        this.color = "blue";
        document
          .getElementsByTagName("body")[0]
          .style.setProperty("--theme-color", this.color);
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
